<template>
  <div>
    <el-table
      ref="table"
      :data="searchArticle ? searchArticle : auditArticle"
      style="width: 100%"
      max-height="560px"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="article_id"
        label="文章ID"
        width="100">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="author_name"
        label="作者"
        width="150">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="title"
        label="文章标题"
        width="200">
      </el-table-column>
      <el-table-column
        prop="content"
        label="文章内容"
        width="200">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="article_type_name"
        label="文章分类"
        width="100">
      </el-table-column>
      <el-table-column
        prop="pictures"
        label="文章图片"
        width="180">
        <el-link type="primary">查看图片</el-link>
      </el-table-column>
      <el-table-column>
        <template slot="header">
          <el-input
            style="width: 200px;"
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <!-- 通过，弹出确认框，确认通过 -->
          <el-button type="primary" size="small" @click="passAudit(scope.row.article_id)">通 过</el-button>
          <!-- 不通过，弹出对话框，选择不通过原因，确定不通过 -->
          <el-button type="danger" size="small" @click="showReason(scope.row.article_id)">不通过</el-button>
          <el-dialog title="选择审核不通过原因" :visible.sync="dialogFormVisible" style="width: 70%;margin-left: 250px; margin-top: 30px;">
            <el-form hide-required-asterisk ref="failForm" class="demo-ruleForm" style="width: 500px" label-position="top">
              <el-form-item label="审核不通过原因" prop="auditing_reason" style="margin-left: 100px">
                <el-select v-model="selectedReason" clearable filterable placeholder="请选择" style="width: 300px">
                  <el-option
                    v-for="item in reasons"
                    :key="item.auditing_reason_id"
                    :label="item.auditing_reason"
                    :value="item.auditing_reason_id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-left: 170px; margin-top: 50px">
                <el-button type="primary" @click="failAudit()">确 定</el-button>
                <el-button @click="cancel('failForm')">取 消</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="danger" @click="passAll()" :disabled="!auditArticle">全部通过</el-button>
      <el-button type="danger" @click="showAll()" :disabled="!auditArticle">全部不通过</el-button>
      <el-dialog title="选择审核不通过原因" :visible.sync="dialogAllVisible" style="width: 70%;margin-left: 250px; margin-top: 30px;">
        <el-form hide-required-asterisk ref="failAll" class="demo-ruleForm" style="width: 500px" label-position="top">
          <el-form-item label="审核不通过原因" prop="auditing_reason" style="margin-left: 100px">
            <el-select v-model="selectedReason" clearable filterable placeholder="请选择" style="width: 300px">
              <el-option
                v-for="item in reasons"
                :key="item.auditing_reason_id"
                :label="item.auditing_reason"
                :value="item.auditing_reason_id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 170px; margin-top: 50px">
            <el-button type="primary" @click="failAll()">确 定</el-button>
            <el-button @click="cancelAll('failAll')">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getAudit, passAudit, failAudit } from 'network/articleAudit'
  import { getArticleTypeById } from 'network/articleType'
  import { getUserById } from 'network/users'
  import { getReason } from 'network/auditReason'

  export default {
    name: 'ArticleAudit',
    data() {
      return {
        // 表格数据
        auditArticle: [],
        // 搜索对应的数据
        searchArticle: null,
        // 被选中的行
        multipleSelection: [],
        // 设置不通过原因弹框的可见性
        dialogFormVisible: false,
        // 设置全部不通过弹框的可见性
        dialogAllVisible: false,
        // 表单宽度
        formLabelWidth: '120px',
        // 搜索关键词
        search: '',
        // 审核不通过原因
        reasons: [],
        // 选择的审核不通过原因
        selectedReason: '',
        // 选中的文章
        articleId: null
      }
    },
    methods: {
      cancel(formName) {
        this.dialogFormVisible = false
        this.$refs[formName].resetFields()
      },

      cancelAll(formName) {
        this.dialogAllVisible = false
        this.$refs[formName].resetFields()
      },

      // 多选框被选中时，保存被选中的数据
      handleSelectionChange(val) {
        this.multipleSelection = val
      },

      // 通过审核
      passAudit(id) {
        this.$confirm('是否确定通过该文章审核？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          passAudit(id).then(res => {
            if (res.status === 1) return this.$message({
              type: 'error',
              message: res.message
            })
            this.getAudit()
            this.$message({
              type: 'success',
              message: '审核通过！'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消！'
          })    
        })
      },

      // 全部通过审核 
      passAll() {
        if (this.multipleSelection.length === 0) {
          return this.$message({
            type: 'error',
            message: '没有选中任何数据！'
          })
        }
        this.$confirm('此操作将通过所有文章审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let status = 0
          this.multipleSelection.forEach(item => {
            passAudit(item.article_id).then(res => {
              if (res.status === 1) {
                status = 1
                console.log(res.message)
                return
              }
              // 审核通过，重新获取待审核文章 
              this.getAudit()
            })
          })
          if (status === 1) return this.$message({
            type: 'error',
            message: '审核通过失败！'
          })
          this.$message({
            type: 'success',
            message: '审核所有文章成功！'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          })    
        })
      },

      // 弹出原因框
      showReason(id) {
        // 弹出审核不通过的弹框
        this.dialogFormVisible = true
        this.articleId = id
      },

      // 审核不通过
      failAudit() {
        if (!this.selectedReason) return this.$message({
          type: 'error',
          message: '请选择不通过原因！'
        })
        failAudit(this.articleId, this.selectedReason).then(res => {
          if (res.status === 1) return this.$message({
            type: 'error',
            message: res.message
          })
          // 审核不通过成功
          this.selectedReason = ''
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            message: '审核不通过成功！'
          })
          this.getAudit()
        })
      },

      // 全部不通过
      showAll () {
        if (this.multipleSelection.length === 0) {
          return this.$message({
            type: 'error',
            message: '没有选中任何数据！'
          })
        }
        this.dialogAllVisible = true
      },

      failAll() {
        if (!this.selectedReason) return this.$message({
          type: 'error',
          message: '请选择不通过原因'
        })
        this.multipleSelection.forEach(item => {
          failAudit(item.article_id, this.selectedReason).then(res => {
            if (res.status === 1) return this.$message({
              type: 'error',
              message: res.message
            })
            this.getAudit()
          })
        })
        // 审核不通过成功
        this.selectedReason = ''
        this.dialogAllVisible = false
        this.$message({
          type: 'success',
          message: '全部审核不通过成功！'
        })
      },

      // 获取待审核文章数据
      getAudit() {
        // 发送网络请求
        getAudit().then(res => {
          if (res.status === 1) console.log(res.message)
          if (res.data) {
            this.auditArticle = res.data
          } else {
            this.auditArticle = []
          }
          if (this.auditArticle.length !== 0) {
            this.auditArticle.forEach(item => {
              // 获取作者名字
              getUserById(item.author_id).then(res => {
                if (res.status === 1) return console.log(res.message)
                this.$set(item, 'author_name', res.data.user_name)
              })
              // 获取文章分类名
              getArticleTypeById(item.article_type_id).then(res => {
                if (res.status === 1) return console.log(res.message)
                this.$set(item, 'article_type_name', res.data.type_name)
              })
            })
          }
        })
      }
    },
    watch: {
      dialogFormVisible(val) {
        if (!val) this.selectedReason = ''
      },
      search(val) {
        this.searchArticle = this.auditArticle.filter(data => !val || data.title.toLowerCase().includes(val.toLowerCase()) || data.author_name.toLowerCase().includes(val.toLowerCase()))
      }
    },
    created() {
      // 获取待审核文章数据
      this.getAudit()
      // 获取审核不通过原因
      getReason().then(res => {
        if (res.data) this.reasons = res.data
      })
    }
  } 
</script>

<style scoped>
  /* 对文章内容列进行多行显示超出隐藏 */
  .el-table__row .el-table__cell:nth-child(5) div {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 25px;
    padding: 0 10px;
  }
</style>